<template>
  <div class="app-container"
  >
    <el-button
      v-if="roleCheck(commCaseRoleType.add)"
      type="primary"
      size="mini"
      @click="openDialog({props:{},dialogName: dialogType.setting})"
    >
      添加现金网佣金设置
    </el-button>
    <el-table v-loading="loading" :data="tableData" border>
      <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
      <el-table-column prop="createTime" label="添加时间" width="200" align="center">
        <template slot-scope="{row}">
          {{row.createTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="添加人" align="center"></el-table-column>
      <el-table-column prop="name" label="佣金方案" width="240" align="center">
        <template slot-scope="{row}">
          {{row.name}}
        </template>
      </el-table-column>
      <el-table-column prop="lastUpdate" label="最后修改" width="200" align="center">
        <template slot-scope="{row}">
          {{row.lastUpdate | toTime}}
        </template>
      </el-table-column>
      <el-table-column prop="lastOperator" label="最后修改人" align="center"></el-table-column>

      <el-table-column label="操作" align="center" fixed="right" width="180">
        <template slot-scope="{row,$index}">
          <el-button
            v-if="roleCheck(commCaseRoleType.edit)"
            type="text"
            @click="openDialog({props:row,dialogName: dialogType.setting})"
          >
            编辑
          </el-button>
          <el-button
            v-if="roleCheck(commCaseRoleType.delete) && $index!==0"
            type="text"
            @click="onClickDeleteItem(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <ProgramSettingDialog
      v-if="dialogName === dialogType.setting"
      v-model="dialogVisible"
      :id="dialogProps.id"
      :rowData="dialogProps"
      @submit="submitFinished"
    />
  </div>
</template>

<script>
// constants
import { messageType } from '@/const/enum';
import { commCaseRoleType } from '@/router/commissionRoutes';

// components
import ProgramSettingDialog from './programSettingDialog';

// services
import { getCommissionCaseList, deleteCommissionCaseItem } from '@/services/api/commission';

// mixins
import { grid, dialog } from '@/build';

const dialogType = {
  setting: 'commission-program-setting-dialog',
};

export default {
  name: 'member-commission-case',
  mixins: [grid, dialog],
  components: {
    ProgramSettingDialog,
  },
  data() {
    return {
      commCaseRoleType,
      filters: {
        limit: 20,
        page: 1,
      },
      tableData: [],
      dialogName: null,
      dialogType,
    };
  },
  methods: {
    async onClickDeleteItem(data) {
      try {
        await this.$confirm('确定要删除此条现金网佣金设置吗？', '删除方案', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        });
        const [status, result] = await deleteCommissionCaseItem(data);
        if (!status) throw new Error(result.message);
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
        this.getAll();
      } catch (e) {
        if (e === messageType.cancel) return;
        this.$message({
          type: 'error',
          message: `删除失败!${e.message || ''}`,
        });
      }
    },
  },
  mounted() {
    this.bindGet(getCommissionCaseList, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });
    console.log({ ...this.tableData });
    this.getAll();
  },
};
</script>

<style lang="scss" scoped>
</style>
